<template>
	<view class="comment_item">
		<view class="comment_item_content">
			<view class="">
				<view class="top">
					<view class="top_left">
						<u-avatar v-if="oneLevel" @click="avatarClick(data.user_id)" mode="aspectFill"
							class="user_avatar" :src="data.user_avatar" size="35"></u-avatar>
						<u-avatar v-if="!oneLevel" @click="avatarClick(data.user_id)" mode="aspectFill"
							class="user_avatar" :src="data.user_avatar" size="25"></u-avatar>
						<uni-tag v-if="data.owner" class="tag" type="primary" :inverted="false" text="作者" size="mini"
							circle />
						<span class="user_name" @click="avatarClick(data.user_id)">{{ data.user_name }}</span>
						<span class="user_name" @click="avatarClick(data.reply_id)">{{ cReplyName }}</span>
					</view>

				</view>
				<view class="content" @tap="replyClick(data)">
					{{ c_content }}
					<span class="shrink" v-if="isShrink" @tap.stop="expandContentFun(data.user_content)">...展开</span>
				</view>
			</view>
			<view class="top_right" @tap="likeClick(data)">
				<uni-icons v-show="data.is_like" type="heart-filled" size="24" color="red"></uni-icons>
				<uni-icons v-show="!data.is_like" type="heart" size="24" color="#999"></uni-icons>
				<view :class="[data.is_like ? 'active' : '', 'like_count']">
					{{ cLikeCount || 0 }}
				</view>
			</view>
		</view>
		<view class="bottom">
			<span class="create_time">{{ data.create_time }}</span>
			<!-- 	<span
				v-if="data.owner"
				class="delete"
				@tap="deleteClick(data)"
			>删除</span> -->
			<!-- <span v-else class="reply" @tap="replyClick(data)"
        >回复</span> -->
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			data: {
				type: Object,
				default: () => ({})
			},
			oneLevel: {
				type: Boolean,
				default: false
			},
			pData: {
				type: Object,
				default: () => ({})
			}
		},
		data() {
			return {
				isShrink: this.data.user_content.length > 70,
				c_content: this.data.user_content.length > 70 ? this.data.user_content.slice(0, 71) : this.data
					.user_content
			};
		},
		computed: {
			cReplyName() {
				return this.data.reply_name ? ` ▸ ` + this.data.reply_name : "";
			},
			cLikeCount() {
				return this.data.like_count === 0 ?
					"" :
					this.data.like_count > 99 ?
					`99+` :
					this.data.like_count;
			}
		},
		mounted() {
			// console.log("回复名字为：" ,this.data);
		},
		methods: {
			avatarClick(id) {
				console.log(id);
				this.$emit("avatarClick", id);
			},
			// 展开评论
			expandContentFun() {
				this.isShrink = false;
			},
			// 点赞
			likeClick(item) {
				this.$emit("likeClick", item);
			},
			// 回复
			replyClick(item) {

				// 自己不能回复自己
				// if (item.owner) return;
				this.$emit("replyClick", item);
			},
			// 删除
			deleteClick(item) {
				this.$emit("deleteClick", item);
			}
		}
	};
</script>


<style lang="scss" scoped>
	////////////////////////
	.center {
		display: flex;
		align-items: center;
	}

	.ellipsis {
		overflow: hidden; //超出文本隐藏
		white-space: nowrap; //溢出不换行
		text-overflow: ellipsis; //溢出省略号显示
	}

	////////////////////////
	.comment_item {
		font-size: 28rpx;

		.comment_item_content {
			display: flex;
			justify-content: space-between
		}

		.top {
			@extend .center;
			justify-content: space-between;

			.top_left {
				display: flex;
				align-items: center;
				overflow: hidden;

				.user_avatar {
					width: 68rpx;
					height: 68rpx;
					border-radius: 50%;
					margin-right: 12rpx;
				}

				.tag {
					width: 40rpx;
					text-align: center;
					// line-height: 30rpx;
					// height: 28rpx;
					font-size: 20rpx;
					margin-right: 6rpx;
					background-color: #FFFFFF;
					border-color: #FFAE1A;
					color: #FFAE1A;
				}

				.user_name {
					@extend .ellipsis;
					max-width: 204rpx;
					color: $uni-text-color-grey;
				}
			}

		}

		.top_right {
			display: flex !important;
			flex-direction: column;
			align-items: center;
			text-align: center;
			@extend .center;

			.like_count {
				color: #999;

				&.active {
					// color: #FFAE1A;
					text-align: center;
					color: #999;
				}
			}
		}

		.content {
			padding: 10rpx;
			margin-left: 70rpx;
			color: $uni-text-color;

			&:active {
				background-color: $uni-bg-color-hover;
			}

			.shrink {
				padding: 20rpx 20rpx 20rpx 0rpx;
				color: $uni-color-primary;
			}
		}

		.bottom {
			padding-left: 80rpx;
			font-size: 24rpx;

			.create_time {
				color: $uni-text-color-grey;
			}

			.delete {
				padding: 20rpx 20rpx 0 20rpx;
				color: $uni-border-color;
			}

			.reply {
				color: $uni-color-primary;
			}
		}
	}
</style>